<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: pink;
        }

        .search-box {
            /* 非常重要 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 40px;
            /* 非常重要 */
            padding: 10px;
            display: flex;
            justify-content: center;
            background: #2f3640;
            border-radius: 40px;
        }

        .search-box>.search-input {
            outline: none;
            border: none;
            background: #2f3640;
            width: 0;
            color: white;
            font-size: 16px;
            transition: all .2s;
        }

        .search-box>.search-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            color: white;
            transition: all .2s;
        }

        .search-box:hover>.search-btn {
            background: white;
            cursor: pointer;
        }

        .search-box:hover>.search-input {
            width: 200px;
            padding: 0 15px;
        }
    </style>
</head>

<body>
    <div class="search-box">
        <input type="text" class="search-input" placeholder="请输入密码">
        <a class="search-btn">
            <svg class="icon" viewBox="0 0 1024 1024" width="30px">
                <path
                    d="M424.024 766.098c-91.619 0-177.754-35.679-242.538-100.464-133.735-133.737-133.735-351.344 0-485.078 64.784-64.784 150.919-100.462 242.538-100.462s177.754 35.677 242.539 100.462c133.733 133.735 133.735 351.34 0 485.078-64.785 64.783-150.922 100.464-242.539 100.464zM424.024 196.085c-60.637 0-117.643 23.613-160.523 66.489-88.512 88.51-88.51 232.53 0 321.040 42.876 42.876 99.885 66.491 160.523 66.491s117.643-23.614 160.523-66.491c88.51-88.51 88.51-232.53 0-321.040-42.876-42.876-99.885-66.489-160.523-66.489z"
                    fill="#e94118" p-id="1176"></path>
                <path
                    d="M886.838 943.904c-14.842 0-29.684-5.663-41.010-16.986l-261.286-261.285c-22.647-22.649-22.647-59.369 0-82.018 22.647-22.647 59.37-22.647 82.018 0l261.286 261.286c22.647 22.649 22.647 59.369 0 82.018-11.325 11.322-26.167 16.985-41.010 16.985z"
                    fill="#e94118" p-id="1177"></path>
            </svg>
        </a>
    </div>
</body>

</html>